<!--
  Generated template for the global.tableListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only (click)="dismiss()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>{{ tableListTitle | translate }}</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="tableClick(0)" *ngIf="type == 'switchTable' && global.curCart.table_num != 0">
      <!--<ion-icon name="basket"></ion-icon>-->
        <img class="navbar-icon" src="assets/img/2.0icon/icon-nav/takeaway.png"/>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<!--<div [ngClass]="{
          'fill-0': global.tableList[i].occupied == 0,
          'fill-10': global.tableList[i].occupied / global.tableList[i].total >= 0.1 && global.tableList[i].occupied / global.tableList[i].total < 0.2,
          'fill-20': global.tableList[i].occupied / global.tableList[i].total >= 0.2 && global.tableList[i].occupied / global.tableList[i].total < 0.3,
          'fill-30': global.tableList[i].occupied / global.tableList[i].total >= 0.3 && global.tableList[i].occupied / global.tableList[i].total < 0.4,
          'fill-40': global.tableList[i].occupied / global.tableList[i].total >= 0.4 && global.tableList[i].occupied / global.tableList[i].total < 0.5,
          'fill-50': global.tableList[i].occupied / global.tableList[i].total >= 0.5 && global.tableList[i].occupied / global.tableList[i].total < 0.6,
          'fill-60': global.tableList[i].occupied / global.tableList[i].total >= 0.6 && global.tableList[i].occupied / global.tableList[i].total < 0.7,
          'fill-70': global.tableList[i].occupied / global.tableList[i].total >= 0.7 && global.tableList[i].occupied / global.tableList[i].total < 0.8,
          'fill-80': global.tableList[i].occupied / global.tableList[i].total >= 0.8 && global.tableList[i].occupied / global.tableList[i].total < 0.9,
          'fill-90': global.tableList[i].occupied / global.tableList[i].total >= 0.9 && global.tableList[i].occupied / global.tableList[i].total < 1,
          'fill-100': global.tableList[i].occupied / global.tableList[i].total >= 1
        }">{{ global.tableList[i].occupied }}/{{ global.tableList[i].total }}</div>-->

<ion-content>

  <ng-container *ngFor="let table of global.tableList; index as i">
    <ion-row *ngIf="i % 4 == 0">
      <ion-col col-3 class="table-item" *ngIf="global.tableList[i]" (click)="tableClick(i)">
        <h1>{{ 'TABLE_NO' | translate }} {{ global.tableList[i].id }}</h1>
        <div [ngClass]="{
          'fill-0': global.tableList[i].orders.length == 0,
          'fill-100': global.tableList[i].orders.length > 0
        }">{{ global.tableList[i].orders.length }}/{{ global.tableList[i].total }}</div>
      </ion-col>
      <ion-col col-3 class="table-item" *ngIf="global.tableList[i + 1]" (click)="tableClick(i + 1)">
        <h1>{{ 'TABLE_NO' | translate }} {{ global.tableList[i+1].id }}</h1>
        <div [ngClass]="{
          'fill-0': global.tableList[i + 1].orders.length == 0,
          'fill-100': global.tableList[i + 1].orders.length > 0
        }">{{ global.tableList[i + 1].orders.length }}/{{ global.tableList[i + 1].total }}</div>
      </ion-col>
      <ion-col col-3 class="table-item" *ngIf="global.tableList[i + 2]" (click)="tableClick(i + 2)">
        <h1>{{ 'TABLE_NO' | translate }} {{ global.tableList[i+2].id }}</h1>
        <div [ngClass]="{
          'fill-0': global.tableList[i + 2].orders.length == 0,
          'fill-100': global.tableList[i + 2].orders.length > 0
        }">{{ global.tableList[i + 2].orders.length }}/{{ global.tableList[i + 2].total }}</div>
      </ion-col>
      <ion-col col-3 class="table-item" *ngIf="global.tableList[i + 3]" (click)="tableClick(i + 3)">
        <h1>{{ 'TABLE_NO' | translate }} {{ global.tableList[i+3].id }}</h1>
        <div [ngClass]="{
          'fill-0': global.tableList[i + 3].orders.length == 0,
          'fill-100': global.tableList[i + 3].orders.length > 0
        }">{{ global.tableList[i + 3].orders.length }}/{{ global.tableList[i + 3].total }}</div>
      </ion-col>
      <ion-col col-12 class="table-detail arrow-0" [ngClass]="{ 'hidden': global.tableList[i].collapsed }" *ngIf="global.tableList[i]">
        <div class="table-order" *ngFor="let order of global.tableList[i].orders">
          <div class="table-order-header" (click)="loadOrder(order);">
            <i class="fa fa-cutlery text-primary"></i>
            <i class="fa fa-money text-green"></i>
            <div class="table-order-time">
              <div>{{ order.table_num }}</div>
              <div>
                <span class="text-lowlight text-small marg-right">{{ order.data.invoice_date | date:'shortTime' }}</span>
                <span class="text-primary text-small">{{ order.data.timeSpan }}</span>
              </div>
            </div>
            <div class="table-order-seat">
              {{ order.data.served_qty }}
            </div>
            <div class="table-order-price">
              <div class="text-primary">${{ order.data.price | number: '1.1-1' }}</div>
              <div class="text-lowlight text-small">{{ order.data.name }}</div>
            </div>
          </div>
          <!--<div class="table-order-footer">
            <i class="fa fa-user text-primary"></i>
            <div class="table-order-seat-change">
              <button ion-button clear small><i class="fa fa-minus text-primary"></i></button>
              <span class="table-order-occupied">{{ order.occupied }}</span>
              <button ion-button clear small><i class="fa fa-plus text-primary"></i></button>
            </div>
            <div class="table-order-settings">
              <button ion-button clear small><i class="fa fa-exchange text-lowlight"></i></button>
              <button ion-button clear small><i class="fa fa-file-text-o text-lowlight"></i></button>
              <button ion-button clear small><i class="fa fa-pie-chart text-lowlight"></i></button>
            </div>
          </div>-->
        </div>
      </ion-col>
      <ion-col col-12 class="table-detail arrow-1" [ngClass]="{ 'hidden': global.tableList[i + 1].collapsed }" *ngIf="global.tableList[i + 1]">
        <div class="table-order" *ngFor="let order of global.tableList[i + 1].orders">
          <div class="table-order-header" (click)="loadOrder(order);">
            <i class="fa fa-cutlery text-primary"></i>
            <i class="fa fa-money text-green"></i>
            <div class="table-order-time">
              <div>{{ order.table_num }}</div>
              <div>
                <span class="text-lowlight text-small marg-right">{{ order.data.invoice_date | date:'shortTime' }}</span>
                <span class="text-primary text-small">{{ order.data.timeSpan }}</span>
              </div>
            </div>
            <div class="table-order-seat">
              {{ order.data.served_qty }}
            </div>
            <div class="table-order-price">
              <div class="text-primary">${{ order.data.price | number: '1.1-1' }}</div>
              <div class="text-lowlight text-small">{{ order.data.name }}</div>
            </div>
          </div>
          <!--<div class="table-order-footer">
            <i class="fa fa-user text-primary"></i>
            <div class="table-order-seat-change">
              <button ion-button clear small><i class="fa fa-minus text-primary"></i></button>
              <span class="table-order-occupied">{{ order.occupied }}</span>
              <button ion-button clear small><i class="fa fa-plus text-primary"></i></button>
            </div>
            <div class="table-order-settings">
              <button ion-button clear small><i class="fa fa-exchange text-lowlight"></i></button>
              <button ion-button clear small><i class="fa fa-file-text-o text-lowlight"></i></button>
              <button ion-button clear small><i class="fa fa-pie-chart text-lowlight"></i></button>
            </div>
          </div>-->
        </div>
      </ion-col>
      <ion-col col-12 class="table-detail arrow-2" [ngClass]="{ 'hidden': global.tableList[i + 2].collapsed }" *ngIf="global.tableList[i + 2]">
        <div class="table-order" *ngFor="let order of global.tableList[i + 2].orders">
          <div class="table-order-header" (click)="loadOrder(order);">
            <i class="fa fa-cutlery text-primary"></i>
            <i class="fa fa-money text-green"></i>
            <div class="table-order-time">
              <div>{{ order.table_num }}</div>
              <div>
                <span class="text-lowlight text-small marg-right">{{ order.data.invoice_date | date:'shortTime' }}</span>
                <span class="text-primary text-small">{{ order.data.timeSpan }}</span>
              </div>
            </div>
            <div class="table-order-seat">
              {{ order.data.served_qty }}
            </div>
            <div class="table-order-price">
              <div class="text-primary">${{ order.data.price | number: '1.1-1' }}</div>
              <div class="text-lowlight text-small">{{ order.data.name }}</div>
            </div>
          </div>
          <!--<div class="table-order-footer">
            <i class="fa fa-user text-primary"></i>
            <div class="table-order-seat-change">
              <button ion-button clear small><i class="fa fa-minus text-primary"></i></button>
              <span class="table-order-occupied">{{ order.occupied }}</span>
              <button ion-button clear small><i class="fa fa-plus text-primary"></i></button>
            </div>
            <div class="table-order-settings">
              <button ion-button clear small><i class="fa fa-exchange text-lowlight"></i></button>
              <button ion-button clear small><i class="fa fa-file-text-o text-lowlight"></i></button>
              <button ion-button clear small><i class="fa fa-pie-chart text-lowlight"></i></button>
            </div>
          </div>-->
        </div>
      </ion-col>
      <ion-col col-12 class="table-detail arrow-3" [ngClass]="{ 'hidden': global.tableList[i + 3].collapsed }" *ngIf="global.tableList[i + 3]">
        <div class="table-order" *ngFor="let order of global.tableList[i + 3].orders">
          <div class="table-order-header" (click)="loadOrder(order);">
            <i class="fa fa-cutlery text-primary"></i>
            <i class="fa fa-money text-green"></i>
            <div class="table-order-time">
              <div>{{ order.table_num }}</div>
              <div>
                <span class="text-lowlight text-small marg-right">{{ order.data.invoice_date | date:'shortTime' }}</span>
                <span class="text-primary text-small">{{ order.data.timeSpan }}</span>
              </div>
            </div>
            <div class="table-order-seat">
              {{ order.data.served_qty }}
            </div>
            <div class="table-order-price">
              <div class="text-primary">${{ order.data.price | number: '1.1-1' }}</div>
              <div class="text-lowlight text-small">{{ order.data.name }}</div>
            </div>
          </div>
          <!--<div class="table-order-footer">
            <i class="fa fa-user text-primary"></i>
            <div class="table-order-seat-change">
              <button ion-button clear small><i class="fa fa-minus text-primary"></i></button>
              <span class="table-order-occupied">{{ order.occupied }}</span>
              <button ion-button clear small><i class="fa fa-plus text-primary"></i></button>
            </div>
            <div class="table-order-settings">
              <button ion-button clear small><i class="fa fa-exchange text-lowlight"></i></button>
              <button ion-button clear small><i class="fa fa-file-text-o text-lowlight"></i></button>
              <button ion-button clear small><i class="fa fa-pie-chart text-lowlight"></i></button>
            </div>
          </div>-->
        </div>
      </ion-col>
    </ion-row>
  </ng-container>

</ion-content>

<ion-footer>
  <button ion-button color="purple" small full *ngIf="type == 'newTable' && activeTable != undefined" (click)="newOrder()">
    <i class="fa fa-plus"></i>
    Add New Shared Table
  </button>
</ion-footer>